@import controllers.core.routes.Assets
@import plugins.Context
@import controllers.core.Start
@import config.WorkbenchConfig

@(context: Option[Context[_]], selectedTab: String = "")(header: Html)(toolbar: Html)(content: Html)(implicit session: play.api.mvc.Session)

@frame(header) {
    <dialog id="primary_dialog" class="mdl-dialog mdl-dialog--modal">
      <div class="mdl-dialog__title">
        <strong class="mdl-dialog__title-text">Primary Modal Dialog</strong>
      </div>
      <div class="mdl-dialog__content">
        <p>
          This modal dialog needs to be filled with some actual content.
        </p>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="sample3">
          <label class="mdl-textfield__label" for="sample3">Text...</label>
        </div>
      </div>
      <div class="mdl-dialog__actions">
        <span><button type="button" class="mdl-button mdl-js-button mdl-button--accent submit">Agree</button></span>
        <span><button type="button" class="mdl-button mdl-js-button mdl-button--accent close">Disagree</button></span>
      </div>
    </dialog>
    <dialog id="secondary_dialog" class="mdl-dialog mdl-dialog--modal">
      <div class="mdl-dialog__title">
        <strong class="mdl-dialog__title-text">Secondary Modal Dialog</strong>
      </div>
      <div class="mdl-dialog__content">
        <p>
          This modal dialog needs to be filled with some actual content.
        </p>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="sample3">
          <label class="mdl-textfield__label" for="sample3">Text...</label>
        </div>
      </div>
      <div class="mdl-dialog__actions">
        <span><button type="button" class="mdl-button mdl-js-button mdl-button--accent submit">Agree</button></span>
        <span><button type="button" class="mdl-button mdl-js-button mdl-button--accent close">Disagree</button></span>
      </div>
    </dialog>


    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

      @if(config.workbench.showHeader) {
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <span class="mdl-layout-title">@config.workbench.title</span>
          <div class="mdl-layout-spacer"></div>
            <button id="app-actions"
                    class="mdl-button mdl-js-button mdl-button--icon">
              <i class="material-icons">more_vert</i>
            </button>
            <script  type="text/javascript">
               function app_logout() {
                  f=document.getElementById('logout_form');
                  if(f) {
                    f.submit();
                  }
               }
            </script>
            <form id="logout_form" action="@{Start.deployPath + "logout"}" method="post">
              <input type="hidden" value="Logout" />
            </form>
            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                for="app-actions">
              <li class="mdl-menu__item" onclick="showDialog('@config.baseUrl/core/aboutDialog');">About</li>
              <li class="mdl-menu__item" onclick="window.location='@config.baseUrl/core/config'">Configuration</li>
              @if(WorkbenchConfig.get.showLogoutButton && session.get("loggedIn")==Some("true")) {
                <li class="mdl-menu__item" onclick="app_logout();">Logout</li>
              }
            </ul>
        </div>
      </header>
      }
      @tabbar(context, selectedTab)
      @if(toolbar != null) {
        <div id="toolbar" class="clearfix">
        @toolbar
        </div>
      }
      <main class="mdl-layout__content">
        <div id="content" class="mdl-tabs__panel is-active">
          @content
        </div>
        <div id="dialogContainer">
          <div class="dialog">
          </div>
        </div>
      </main>
    </div>
}